import { useContext, useEffect } from 'react';
import { ContractHomeContext } from '../../../common';
import { DatePicker, Form } from 'antd';
import moment from 'moment';
import { ContractHomePageCountAPI } from '../../../common/type';

export const ContractCountCollecLeftHeard: React.FC<ContractHomePageCountAPI.IContractCountCollecLeftHeard> = ({ reportAllByDateStepRun }) => {
  /**引入上下文 */
  const { styleFixCls } = useContext(ContractHomeContext);

  const [searchForm] = Form.useForm();

  /** 统计步长 */
  // const [countStepType, setCountStepType] = useState<string>('月');

  useEffect(() => {
    reloadCount();
  }, []);

  /** 重置 */
  const reloadCount = () => {
    onSearch();
  };

  /** 搜索 */
  const onSearch = () => {
    const searchPayload: Record<string, any> = searchForm?.getFieldsValue();
    // let stepStr: number = 2;
    // if (countStepType == '月') {
    //   stepStr = 2;
    // } else if (countStepType == '年') {
    //   stepStr = 3;
    // }

    let params: Record<string, any> = {
      startTime: moment(searchPayload?.collecleTimeRanges)?.format('YYYY-01-01 00:00:00'),
      endTime: moment(searchPayload?.collecleTimeRanges)?.format('YYYY-12-31 23:59:59'),
      // choiceStyle: stepStr,
      choiceStyle: 2,
    };

    reportAllByDateStepRun({
      ...params,
    });
  };

  return (
    <div className={`${styleFixCls}echartHeardBox`}>
      <Form form={searchForm} className={`${styleFixCls}echartHeardBox-searchFormBox`}>
        <Form.Item name="collecleTimeRanges" initialValue={moment()}>
          <DatePicker
            picker="year"
            onChange={() => {
              onSearch();
            }}
            allowClear={false}
          />
        </Form.Item>
      </Form>
    </div>
  );
};
